import React, { Component } from 'react'
import styles from "./index.less"

export default class test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: Number(props.width),
      height: Number(props.height),
      transform: "translateX(-50%) translateY(-50%) scale(1)",
    }
  }

  componentDidMount() {
    this.setMedia(this.state.width, this.state.height, document.body.clientWidth, document.body.clientHeight)
    window.addEventListener("resize", () => {
      this.setMedia(this.state.width, this.state.height, document.body.clientWidth, document.body.clientHeight)
    })
  }
  setMedia(width, height, windowWidth, windowHeight) {
    if (this.props.isOldSize) {
      return;
    }
    this.setState(height / width >= windowHeight / windowWidth ?
      {
        transform: `translateX(-50%) translateY(-50%) scale(${windowHeight / height})`,
      } :
      {
        transform: `translateX(-50%) translateY(-50%) scale(${windowWidth / width})`,
      }
    )
  }
  render() {
    return (
      <div ref={(_) => (this.bigBox = _)} className={styles.box}

        style={{
          transform: this.state.transform,
          width: this.state.width,
          height: this.state.height,
        }}
      >
        {this.props.children}
      </div>
    )
  }
}